<template>
  <div class="home">
    <TopNavigationBar :items="items" :defaultIndex="defaultIndex"
    @changeSelectIndex="changeSelectIndex"/>
    <div class="list_container">
      <van-pull-refresh 
      v-model="refreshing" 
      @refresh="onRefresh">
         <van-list
         offset="0"
         :finished="finished"
         finished-text="没有更多了"
         v-model="loading"
         @load="onLoad">
            <!-- <van-cell v-for="(item,index) in newsList" 
            :key="index"> -->
              <div class="list_item_container"
              v-for="(item,index) in newsList"
              :key="index">
                <div>{{item.title}}</div>
                <div>{{item.content}}</div>
              </div>
            <!-- </van-cell> -->
         </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import TopNavigationBar from "../components/TopNavigationBar"
import axios from "axios";
export default {
  name: 'Home',
  components: {
    TopNavigationBar
  },
  data(){
    return{
      items:["体育","热点","军事","娱乐","游戏","生活","美食","八卦","财经","美女"],
      newsList:[],
      defaultIndex:0,
      refreshing:false,
      loading:false,
      finished:false
    }
  },
  methods:{
    changeSelectIndex(index){
      console.log(index)
      this.defaultIndex = index;
      this.newsList  = [];
      this.getListData();
    },
    //下拉刷新事件
    onRefresh(){
      console.log("下拉刷新");
      console.log(this.refreshing)
      console.log(this.loading)
      
      axios.get("http://api.kudesoft.cn/news/list",{
         params:{
          kw:this.items[this.defaultIndex],
          page:1
         }
       }).then((res)=>{
         console.log(res);

         //清除数据源
         this.newsList = [];
         //将列表的下拉刷新状态和加载状态置为false
         this.refreshing = false;
         this.loading = false;
         this.finished = false;

         //设置数据
         this.newsList = res.data.result.data;
        //  console.log(this.refreshing)
        //  console.log(this.loading)

       }).catch(()=>{

       })
    },
    //加载时间
    onLoad(){
      console.log(this.loading)
      console.log("列表加载");
      axios.get("http://api.kudesoft.cn/news/list",{
         params:{
          kw:this.items[this.defaultIndex],
          page:1
         }
       }).then((res)=>{
        console.log(res)
        this.newsList = [...this.newsList,...res.data.result.data];
        //将loading状态变为false
        this.loading = false;

        if(this.newsList.length >=  40){
          this.finished = true;
        }

        console.log(this.newsList)
      }).catch(()=>{

      })
    }
  }
}
</script>

<style scoped>
.list_container
{
  width: 100%;
  margin-top: 64px;
}

.list_item_container
{
  width: 100%;
  height: 200px;
  border: 1px solid red;
}

</style>
